<template>
<div>
      <div class="swiper-container"v ref="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="imgs in imgurls">
        <img :src="imgs.imgUrl" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>
</template>

<script>
import Swiper from 'swiper'
export default {
  name: "Slideshow",
  mounted() {
    var mySwiper = new Swiper(this.$refs.swiper, {
      loop: true,
      pagination: {
        el: ".swiper-pagination",
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      scrollbar: {
        el: ".swiper-scrollbar",
      },
      observer: true,
      observeParents: true,
    });
  },
  props: ["imgurls"],
};
</script>

<style>
</style>